<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row>
      <el-col :span="20">
        <h3>每日订单生成数量</h3>
        <el-date-picker
          style="margin-bottom: 20px;margin-right: 20px;"
          v-model="value1"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
          <span style="font-size: 20px;color: dodgerblue">
                    {{$moment(value1).format("YYYY-MM-DD")}}
            <span style="color: #000000">
              生成订单数量为：
            </span>
            <span style="color: #ff0000">
              {{orderCounts}}
            </span>
          </span>

      </el-col>
    </el-row>
    <el-row :getter="30">
      <el-col :span="12">
        <h3>用户性别比例</h3>
        <div style="background: white">
          <ve-pie :data="userGender"></ve-pie>
        </div>
      </el-col>
    </el-row>

    <h3 style="margin-top: 50px;margin-bottom: -30px;">各个分类作品数量</h3>
    <ve-histogram width="100%" :data="chartData" :extend="extend" :legend-visible="false"></ve-histogram>
    <!--    <div id="myChart" ref="myChart" style="height: 500px;width: 500px;"></div>-->

  </div>
</template>

<script>
    import {getAllUser} from "../../assets/api/userApi";
    import {listSecondLevelCategories} from "../../assets/api/categoryApi";
    import {selectAllWorks} from "../../assets/api/worksInfoApi";
    import {selectAllOrders, selectOrdersByDay} from "../../assets/api/orderApi";

    export default {
        data() {
            return {
                value1: new Date(),
                orderCounts: 0,
                user: [],
                workNum: [],
                userGender: {
                    columns: ["性别", "总数"],
                    rows: [
                        {性别: "男", 总数: 0},
                        {性别: "女", 总数: 0},
                    ],
                },
                extend: {
                    "xAxis.0.axisLabel.rotate": 45,
                    yAxis: {
                        axisLine: {
                            show: true,
                        },
                        splitLine: {
                            show: true,
                        },
                        position: "left",
                    },
                    xAxis: {
                        axisLine: {
                            show: true,
                        },
                    },
                    series: {
                        label: {show: true, position: "top"},
                    },
                    dataZoom: [
                        {
                            show: true,
                            realtime: true,
                            start: 0,
                            end: 5000,
                        },
                        {
                            type: "inside",
                            realtime: true,
                            start: 0,
                            end: 5000,
                        },
                    ],
                },
                chartData: {
                    columns: [
                        "分类", "数量"
                    ],
                    rows: [
                        {分类: "风景p图", 数量: 0},
                        {分类: "音频处理", 数量: 0},
                        {分类: "音频合成", 数量: 0},
                        {分类: "集体照处理", 数量: 0},
                        {分类: "角色设计", 数量: 0},
                        {分类: "视频处理", 数量: 0},
                        {分类: "视频合成", 数量: 0},
                        {分类: "视频制作", 数量: 0},
                        {分类: "海报制作", 数量: 0},
                        {分类: "海报ps", 数量: 0},
                        {分类: "建筑设计", 数量: 0},
                        {分类: "头像设计", 数量: 0},
                        {分类: "图片设计", 数量: 0},
                        {分类: "图像处理", 数量: 0},
                        {分类: "人像精修", 数量: 0},
                        {分类: "MV制作", 数量: 0},
                        {分类: "logo设计", 数量: 0},
                        {分类: "asds", 数量: 0}
                    ],
                },
                demands: []
            }

        },
        created() {
            this.getALLUser();
            this.getWorkCategoriesNums();
            this.getOrders();
        },
        methods: {
            getALLUser() {
                getAllUser().then(res => {
                    this.user = res.data;
                    this.userGender.rows[0]["总数"] = this.genderCount(1, this.user)
                    this.userGender.rows[1]["总数"] = this.genderCount(0, this.user)
                })
            },
            genderCount(gender, userObj) {
                let count = 0
                for (let item of userObj) {
                    if (gender === item.gender) {
                        count++
                    }
                }
                return count
            },
            getWorkCategoriesNums() {
                selectAllWorks().then(res => {
                    this.worksNum = res.data;
                });
                this.getWorkCategory();
            },
            countWorks(id, works) {
                let count = 0;
                for (let item of works) {
                    if (item.categoryId === id) {
                        count++;
                    }
                }
                return count;
            },
            getWorkCategory() {
                listSecondLevelCategories().then(res => {
                    console.log(res.data)
                    for (let i = 0; i < res.data.length; i++) {
                        this.chartData.rows[i]['分类'] = res.data[i].categoryName;
                        this.chartData.rows[i]['数量'] = this.countWorks(res.data[i].categoryId, this.worksNum);
                    }
                    console.log(this.chartData)
                });

            },
            getOrders() {
                let data = {};
                data.day = this.value1;
                selectOrdersByDay(data).then(res => {
                    this.orderCounts = res.data;
                })
            },
        },
        watch:{
          value1:{
              handler(val){
                  this.getOrders();
              },

          }
        }
    }
</script>

<style scoped>
  @import "../../styles/css/global.css";
</style>
